<template>
  <div class="logo1">
    <!-- <router-link style="display:inline-block" :to="{ path: gotoUrl }"> -->
    <div class="active-class" @click="gotoUrl">
      <!-- <img src="chinaunicom.png" alt="logo" /> -->
      <!-- <div class="img" v-if="!systemLogo.length"></div> -->
      <!-- <img class="img" v-else :src="systemLogo" alt="logo" /> -->
      <h1 v-if="showTitle">{{ systemTitle }}</h1>
    </div>
    <!-- </router-link> -->
  </div>
</template>

<script>
import { imageDownLoad } from '@/api/file'
export default {
  name: 'Logo',
  data () {
    return {
      systemTitle: '教育数字基座赋能平台',
      systemLogo: ''
    }
  },
  props: {
    title: {
      type: String,
      required: false
    },
    showTitle: {
      type: Boolean,
      default: true,
      required: false
    },
    logo: {
      type: String,
      required: false
    }
  },
  mounted () { },
  watch: {
    logo: {
      handler () {
        if (this.logo) {
          this.getAvatar(this.logo)
        } else {
          // this.systemLogo = 'chinaunicom_large.png'
        }
      },
      immediate: true
    }
  },
  methods: {
    // 下载base64图片
    getAvatar (name) {
      imageDownLoad('/ss/file/' + name).then(res => {
        this.systemLogo = res
      })
    },
    gotoUrl () {
      const precessEnv = process.env
      // if (precessEnv.VUE_APP_FLAG === 'local') {
      //   location.href = 'http://10.9.102.68:6005/031-131/#/home/'
      // } else
      if (precessEnv.VUE_APP_FLAG === 'testing') {
        location.href = 'http://10.9.102.68:6005/031-131/#/home/'
      } else if (precessEnv.VUE_APP_FLAG === 'demo') {
        location.href = 'http://10.9.102.68:31136/#/home/'
      }
      // else if (precessEnv.VUE_APP_FLAG === 'dev') {
      // }
    }
  }
}
</script>
<style lang="less" scoped>
/*缩小首页布 局顶部的高度*/
@height: 59px;

.sider {
  box-shadow: none !important;

  .logo1 {
    box-shadow: none !important;
    transition: background 300ms;

    .active-class {
      display: flex;
      height: @height !important;
      align-items: center;
      margin-left: 20px;
    }

    .img {
      // display: inline-block;
      // vertical-align: middle;
      width: 50px;
      height: 44px;
    }

    h1 {
      font-weight: 500;
      font-size: 14px;
      line-height: 22px;
      margin-left: 10px;
      // width: 100px;
      color: #fff;
    }

    a {
      color: white;

      &:hover {
        color: rgba(255, 255, 255, 0.8);
      }
    }
  }
}

.active-class {
  cursor: pointer;
}
</style>
